<template>
<div>
  <a-modal v-model:visible="visible" @ok="handleOk" title="选择表格表头" :width="800" :bodyStyle="bodyStyle" destroyOnClose>
    <div class="custom-box">
      <div class="custom-head">
        <span>可选字段</span>
      </div>
      <div class="custom-body">
        <a-row>
          <a-col class="custom-checkobox" :span="6" v-for="item in plainOptions" :key="item.value">
            <a-checkbox :value="item.value">{{item.label}}</a-checkbox>
          </a-col>
        </a-row>
      </div>
    </div>
    <template #footer>
      <div class="form-btn-bottom">
        <div>
          <a-button type="link">恢复默认设置</a-button>
        </div>
        <div>
          <a-button key="back" class="border-btn">取消</a-button>
          <a-button key="submit" @click="handleOk" class="search-btn1">保存</a-button>
        </div>
      </div>
    </template>
  </a-modal>
</div>
</template>


<script setup>
import {ref} from "vue";
const visible = ref(false);
const bodyStyle = ref({
})
const value2 = ref('')
const plainOptions = ref([
  {
    label: '合同编号',
    value: 'a'
  },
  {
    label: '合同名称',
    value: 'b'
  },
  {
    label: '合同类型',
    value: 'c'
  },
  {
    label: '申请人',
    value: 'd'
  },
  {
    label: '审批人',
    value: 'e'
  },
  {
    label: '优秀之处',
    value: 'f'
  },
  {
    label: '归档名称',
    value: 'g'
  }
])
const showModal = () => {
  visible.value = true;
};
const handleOk = e => {
  console.log(e);
  visible.value = false;
};
// eslint-disable-next-line no-undef
defineExpose({
  showModal,
  handleOk
})
</script>

<style lang="scss" scoped>
.custom-box {
  width: 750px;
  height: 303px;
  background: #ffffff;
  border: 1px solid #dcdee0;
  .custom-head {
    width: 750px;
    height: 40px;
    background: #ebecf0;
    color: #2C3749;
    line-height: 40px;
    span {
      padding-left: 20px;
    }
  }
  .custom-body {
    padding: 20px;
    overflow-y: scroll;
    .custom-checkobox {
      margin-bottom: 24px;
    }
  }
}
.form-btn-bottom {
  display: flex;
  justify-content: space-between;
  height: 62px;
  line-height: 62px;
  background: #ffffff;
  box-shadow: 0px -4px 9px 0px rgba(0,0,0,0.09);
}
</style>
